<template>
  <div class="container">
    <h1>家政服务预约后台管理</h1>
    <div class="box">
      <div class="left"></div>
      <div class="right">
        <h4>登 录</h4>
        <form :model="loginForm" :rules="loginRules" ref="loginForm">
          <input class="acc" type="text" placeholder="用户名" v-model="loginForm.username" ref="username"/>
          <input class="acc" type="password" placeholder="密码" v-model="loginForm.password" ref="password"/>
          <input class="submit" type="button" value="Login" @click="handleLogin" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/request";
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      callback();
    };
    const validatePassword = (rule, value, callback) => {
      callback();
    };
    return {
      visible: false,
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      passwordType: "password",
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.loginForm.username === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  methods: {
    // 提交注册
    submitHandler() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          let url = "/user/register";
          post(url, this.form).then((response) => {
            this.$message({ type: "success", message: response.message });
            this.visible = false;
          });
        } else {
          return false;
        }
      });
    },
    // 重置表单校验
    clearValidate() {
      this.$refs["registerForm"].clearValidate();
    },
    // 去保存
    toRegisterHandler() {
      this.form = {};
      this.visible = true;
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || "/",
                query: this.otherQuery,
              });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  font-size: 10px;
  width: 100%;
  height: 100%;
  position: fixed;
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%) no-repeat;
}
h1{
  font-size: 6em;
  text-align: center;
  margin-top: 5%;
  text-shadow: 5px 5px 5px #ccc;
  color: #fff;
}
::selection {
  color: #fff;
  background-color: rgb(144, 129, 241);
}

.box {
  display: flex;
  overflow: hidden;
  width: 90em;
  height: 55em;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1.5em;
  margin: 3% auto;
  box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.1);
}

.box .left {
  position: relative;
  width: 35%;
  height: 100%;
  background-color: skyblue;
}

.box .left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(./images/left.png);
  background-size: cover;
  opacity: 0.8;
}

.box .right {
  display: flex;
  width: 65%;
  flex-direction: column;
  align-items: center;
}

.box .right h4 {
  color: rgb(144, 129, 241);
  font-size: 3em;
  margin-top: 2em;
}

.box .right form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box .right form .acc {
  outline: none;
  width: 80%;
  height: 5em;
  font-size: 1.6em;
  margin-top: 3em;
  padding: 1em 0 0 1.6em;
  border: none;
  border-bottom: 1px solid rgb(144, 129, 241);
  color: rgb(144, 129, 241);
  background-color: rgba(0, 0, 0, 0);
}

.right form .acc:focus {
  outline: none;
  color: rgb(144, 129, 241);
  padding: 1em 0 0 1.6em;
}

.right .submit {
  width: 60%;
  height: 5em;
  color: #f6f6f6;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  font-size: 1.4em;
  border: none;
  border-radius: 0.5em;
  margin: 6em 0 0 50%;
  transform: translateX(-50%);
}

.right .submit:hover {
  box-shadow: 0 0 2em -0.5em rgba(0, 0, 0,  0.15);
  cursor: pointer;
}

.right .fn {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  width: 70%;
}

.right .fn a {
  font-size: 1.3em;
  margin-top: 5em;
  padding: 1em 2em;
  color: #666;
}

.right .fn a:hover {
  color: rgb(144, 129, 241);
}
</style>
